import {View} from '@tarojs/components'
import {AtTabs, AtTabsPane} from 'taro-ui'
import {useState} from 'react'
import {useDidShow} from '@tarojs/taro'
import "taro-ui/dist/style/components/tabs.scss"
import http from '../../http/http'
import ContentBar from './components/contentBar'
import './classifySearch.less'

const ClassifySearch = () => {

  const [current, setcurrent] = useState(0)
  const [classify2, setClassify2] = useState([])
  const [allGoods, setAllGoods] = useState([])

  // 获取所有商品
  const allGoodsData = () => {
    http({
      url: '/huangyi/getAllGoods',
      method: 'get'
    }).then(res => {
      console.log(res)
      setAllGoods(res.data)
    })
  }

  // 获取分类数据
  useDidShow(() => {
    http({
      url: '/huangyi/getClassify',
      method: 'get'
    }).then(res => {
      console.log(res)
      res.data2.forEach(v => v.title = v.name)
      res.data2.unshift({title: '热销', id: 99999})
      setClassify2(res.data2)
    })
    allGoodsData()
  })

  // 切换一级分类栏
  const handleClick = (value) => {
    setcurrent(value)
  }
  return (
    <View className='classifySearch'>
      <AtTabs
        current={current}
        scroll
        tabList={classify2}
        onClick={handleClick}
        className='classify1'
      >

        {classify2.map((v, i) => (<AtTabsPane current={current} index={i} key={v.id}>

          <View style='font-size:18px;text-align:center;'>
            <ContentBar allGoods={allGoods} allGoodsData={allGoodsData}></ContentBar>
          </View>

        </AtTabsPane>))}

      </AtTabs>
    </View>
  )

}

export default ClassifySearch